<template>
  <view class="berth-disable-page">
    <!-- 泊位禁用审核列表区域 -->
    <view class="disable-list-container">
      <z-paging
        ref="paging"
        v-model="disableList"
        @query="queryList"
        :auto="true"
        :refresher-enabled="true"
        :loading-more-enabled="true"
        :empty-view-text="'暂无数据'"
        class="disable-list"
      >
        <template #top>
          <!-- 导航栏 -->
          <up-navbar title="我提交的禁用审核" :autoBack="true" :fixed="true" bgColor="transparent" :border="false" placeholder/>
          
          <!-- 筛选器区域 -->
          <view class="filter-section">
            <view class="filter-row">
              <view class="filter-item">
                <picker mode="selector" :value="filters.statusIndex" :range="statusOptions" range-key="text" @change="onStatusChange">
                  <view class="picker-text">
                    <text>{{ filters.statusIndex >= 0 ? statusOptions[filters.statusIndex].text : '审核状态' }}</text>
                    <up-icon name="arrow-down" size="14"></up-icon>
                  </view>
                </picker>
              </view>
              <view class="filter-item">
                <picker mode="selector" :value="filters.parkingIndex" :range="parkingOptions" range-key="text" @change="onParkingChange">
                  <view class="picker-text">
                    <text>{{ filters.parkingIndex >= 0 ? parkingOptions[filters.parkingIndex].text : '停车场' }}</text>
                    <up-icon name="arrow-down" size="14"></up-icon>
                  </view>
                </picker>
              </view>
            </view>
            <view class="filter-row">
              <view class="filter-item search-item">
                <up-search
                  v-model="filters.searchKeyword"
                  :clearabled="true"
                  :showAction="true"
                  placeholder="请输入泊位号"
                  @search="handleSearch"
                  @clear="handleClear"
                >
                  <template #action>
                    <up-button type="primary" size="small" @click="handleSearch">搜索</up-button>
                  </template>
                </up-search>
              </view>
            </view>
          </view>
        </template>
        <view class="disable-list-content">
          <berth-disable-item
            v-for="item in disableList"
            :key="item.id"
            :disable="item"
            @view="handleView"
          />
        </view>
      </z-paging>
    </view>

    <!-- 详情弹窗 -->
    <up-popup v-model:show="showDetail" mode="center" width="80%" radius="12" background="#fff" padding="30rpx">
      <view class="detail-popup">
        <view class="popup-header">
          <text class="popup-title">禁用审核详情</text>
          <up-icon name="close" size="24" @click="showDetail = false"></up-icon>
        </view>
        <view class="popup-content" v-if="currentDetail">
          <view class="detail-item">
            <text class="detail-label">泊位号：</text>
            <text class="detail-value">{{ currentDetail.berthNumber }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">停车场：</text>
            <text class="detail-value">{{ currentDetail.parkingName }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">申请时间：</text>
            <text class="detail-value">{{ currentDetail.createTime }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">审核状态：</text>
            <text class="detail-value" :class="getStatusTextClass(currentDetail.status)">{{ getStatusText(currentDetail.status) }}</text>
          </view>
          <view class="detail-item" v-if="currentDetail.processTime">
            <text class="detail-label">审核时间：</text>
            <text class="detail-value">{{ currentDetail.processTime }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">申请原因：</text>
            <text class="detail-value">{{ currentDetail.reason }}</text>
          </view>
          <view class="detail-item" v-if="currentDetail.remark">
            <text class="detail-label">审核备注：</text>
            <text class="detail-value">{{ currentDetail.remark }}</text>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import BerthDisableItem from './components/BerthDisableItem.vue'

// 筛选条件
const filters = reactive({
  statusIndex: 0,
  parkingIndex: 0,
  searchKeyword: ''
})

// 下拉选项数据
const statusOptions = [
  { value: '', text: '全部状态' },
  { value: 'pending', text: '待审核' },
  { value: 'success', text: '已通过' },
  { value: 'danger', text: '已拒绝' }
]

const parkingOptions = [
  { value: '', text: '全部停车场' },
  { value: 'park1', text: '西湖停车场' },
  { value: 'park2', text: '钱江停车场' },
  { value: 'park3', text: '武林停车场' }
]

// 列表数据
const disableList = ref([])
const paging = ref(null)

// 详情弹窗
const showDetail = ref(false)
const currentDetail = ref(null)

// 获取泊位禁用审核列表数据
const queryList = async (pageNo, pageSize) => {
  try {
    // 获取筛选条件的值
    const params = {
      status: filters.statusIndex === 0 ? undefined : statusOptions[filters.statusIndex].value,
      parkingId: filters.parkingIndex === 0 ? undefined : parkingOptions[filters.parkingIndex].value,
      searchKeyword: filters.searchKeyword,
      pageNum: pageNo,
      pageSize
    }

    // TODO: 替换为实际的API调用
    const response = await new Promise(resolve => {
      setTimeout(() => {
        // 模拟数据筛选
        let mockData = [
          {
            id: '1',
            berthNumber: 'A001',
            parkingName: '西湖停车场',
            parkingId: 'park1',
            status: 'pending',
            createTime: '2024-03-15 10:30:00',
            reason: '设备故障'
          },
          {
            id: '2',
            berthNumber: 'B002',
            parkingName: '钱江停车场',
            parkingId: 'park2',
            status: 'success',
            createTime: '2024-03-15 09:15:00',
            processTime: '2024-03-15 11:20:00',
            reason: '道路施工',
            remark: '审核通过'
          },
          {
            id: '3',
            berthNumber: 'C003',
            parkingName: '武林停车场',
            parkingId: 'park3',
            status: 'danger',
            createTime: '2024-03-15 08:00:00',
            processTime: '2024-03-15 09:30:00',
            reason: '临时活动',
            remark: '理由不充分'
          },
          {
            id: '4',
            berthNumber: 'A002',
            parkingName: '西湖停车场',
            parkingId: 'park1',
            status: 'pending',
            createTime: '2024-03-15 07:45:00',
            reason: '车位维修'
          },
          {
            id: '5',
            berthNumber: 'B003',
            parkingName: '钱江停车场',
            parkingId: 'park2',
            status: 'success',
            createTime: '2024-03-15 06:30:00',
            processTime: '2024-03-15 08:15:00',
            reason: '安全隐患',
            remark: '审核通过'
          }
        ]

        // 根据状态筛选
        if (params.status) {
          mockData = mockData.filter(item => item.status === params.status)
        }

        // 根据停车场筛选
        if (params.parkingId) {
          mockData = mockData.filter(item => item.parkingId === params.parkingId)
        }

        // 根据泊位号筛选
        if (params.searchKeyword) {
          const keyword = params.searchKeyword.toLowerCase()
          mockData = mockData.filter(item => 
            item.berthNumber.toLowerCase().includes(keyword)
          )
        }

        resolve({
          data: mockData,
          total: mockData.length
        })
      }, 1000)
    })
    
    paging.value.complete(response.data)
  } catch (error) {
    console.error('获取泊位禁用审核列表失败:', error)
    uni.showToast({
      title: '获取数据失败',
      icon: 'none'
    })
    paging.value.complete(false)
  }
}

// 处理筛选条件变化
const onStatusChange = (e) => {
  filters.statusIndex = parseInt(e.detail.value)
  paging.value.reload()
}

const onParkingChange = (e) => {
  filters.parkingIndex = parseInt(e.detail.value)
  paging.value.reload()
}

// 处理搜索
const handleSearch = () => {
  paging.value.reload()
}

// 处理清空搜索
const handleClear = () => {
  filters.searchKeyword = ''
  paging.value.reload()
}

// 处理查看详情
const handleView = (item) => {
  currentDetail.value = item
  showDetail.value = true
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    pending: '待审核',
    success: '已通过',
    danger: '已拒绝'
  }
  return statusMap[status] || '待审核'
}

// 获取状态文本样式
const getStatusTextClass = (status) => {
  const statusMap = {
    pending: 'status-text-pending',
    success: 'status-text-success',
    danger: 'status-text-danger'
  }
  return statusMap[status] || 'status-text-pending'
}
</script>

<style lang="scss" scoped>
.berth-disable-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.disable-list-container {
  height: 100%;
}

.filter-section {
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.filter-row {
  display: flex;
  margin-bottom: 20rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.filter-item {
  flex: 1;
  margin-right: 20rpx;
  
  &:last-child {
    margin-right: 0;
  }
}

.picker-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f5f5;
  padding: 16rpx 20rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.search-item {
  flex: 1;
}

.disable-list-content {
  padding: 20rpx;
}

// 详情弹窗样式
.detail-popup {
  width: 100%;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.popup-content {
  max-height: 60vh;
  overflow-y: auto;
}

.detail-item {
  display: flex;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  line-height: 1.5;
}

.detail-label {
  color: #666666;
  min-width: 160rpx;
}

.detail-value {
  color: #333333;
  flex: 1;
  
  &.status-text-pending {
    color: #fa8c16;
  }
  
  &.status-text-success {
    color: #52c41a;
  }
  
  &.status-text-danger {
    color: #f5222d;
  }
}
</style>